<template>
  <view class="detail-container">
	<!-- 详情页导航 -->
	<custom-nav-bar
	  title="卦象详情"
	  :show-back="true"
	  bg-color="#4B79FF"
	/>
    
    <!-- 详情内容 -->
    <scroll-view 
      class="content"
      scroll-y
      :style="{ 
        height: `calc(100vh)`,
        paddingTop: `${navHeight}rpx`
      }"
    >
      <!-- 顶部卡片 -->
      <view class="top-card"
	  :style="{
	    marginTop: `${navHeight-20}rpx`
	  }"
	  >
        <view class="main-info">
          <text class="status-tag" :class="detailData.status === '吉' ? 'good' : 'bad'">
            {{ detailData.status || '-' }}
          </text>
          <text class="hexagram">{{ detailData.hexagram || '-' }}</text>
        </view>
        <text class="result">{{ detailData.result || '暂无结果' }}</text>
      </view>

      <!-- 详情卡片 -->
      <view class="detail-card">
        <view class="card-title">基本信息</view>
        <view class="info-grid">
          <view class="grid-item">
            <text class="label">时间</text>
            <text class="value">{{ detailData.time || '-' }}</text>
          </view>
          <view class="grid-item">
            <text class="label">动爻</text>
            <text class="value">{{ detailData.changes || '-' }}</text>
          </view>
          <view class="grid-item">
            <text class="label">农历</text>
            <text class="value">{{ detailData.detail?.lunarDate || '-' }}</text>
          </view>
        </view>

        <view class="divider"></view>

        <view class="card-title">干支信息</view>
        <view class="info-grid">
          <view class="grid-item">
            <text class="label">年支</text>
            <text class="value">{{ detailData.detail?.ganZhi?.year || '-' }}</text>
          </view>
          <view class="grid-item">
            <text class="label">月支</text>
            <text class="value">{{ detailData.detail?.ganZhi?.month || '-' }}</text>
          </view>
          <view class="grid-item">
            <text class="label">日支</text>
            <text class="value">{{ detailData.detail?.ganZhi?.day || '-' }}</text>
          </view>
          <view class="grid-item">
            <text class="label">时支</text>
            <text class="value">{{ detailData.detail?.ganZhi?.time || '-' }}</text>
          </view>
        </view>

        <view class="divider"></view>

        <view class="card-title">神煞信息</view>
        <view class="info-grid">
          <view class="grid-item">
            <text class="label">空亡</text>
            <text class="value">{{ detailData.detail?.kongWang || '-' }}</text>
          </view>
          <view class="grid-item">
            <text class="label">贵人</text>
            <text class="value">{{ detailData.detail?.shenSha?.guiRen || '-' }}</text>
          </view>
          <view class="grid-item">
            <text class="label">文昌</text>
            <text class="value">{{ detailData.detail?.shenSha?.wenChang || '-' }}</text>
          </view>
          <view class="grid-item">
            <text class="label">天喜</text>
            <text class="value">{{ detailData.detail?.shenSha?.tianXi || '-' }}</text>
          </view>
        </view>
        
		<view class="divider"></view>
		<view class="card-title">卦象信息</view>
		<view class="info-grid">
		  <view class="grid-item">
		    <text class="label">空亡</text>
		    <text class="value">{{ detailData.detail?.kongWang || '-' }}</text>
		  </view>
		  <view class="grid-item">
		    <text class="label">空亡ss</text>
		    <text class="value">{{ detailData.detail?.kongWang || '-' }}</text>
		  </view>
		</view>
		
	  
	  </view>
    </scroll-view>
  </view>
</template>

<script>
import CustomNavBar from '@/components/CustomNavBar.vue'
export default {
	components: {
		CustomNavBar
	},
  data() {
    return {
      statusBarHeight: 0,
      navHeight: 0,
      detailData: {}
    }
  },
  
  onLoad(options) {
    // 获取系统信息
    const sysInfo = uni.getSystemInfoSync()
    this.statusBarHeight = sysInfo.statusBarHeight
    this.navHeight = this.statusBarHeight + 88
	// this.statusBarHeight = ref(sysInfo.statusBarHeight+40)
	//  this.navHeight = ref(statusBarHeight.value + 60) // 增加导航栏高度
    console.log('options.id===={}')
    // 获取传递的数据
    if (options.id) {
      this.detailData = {
        id: options.id,
        title: '事业前程测算',
        time: '2024-03-18 14:30',
        hexagram: '乾为天',
        changes: '初九、九二',
        status: '吉',
        result: '大吉大利，前程似锦，诸事顺遂',
        detail: {
          lunarDate: '甲辰年二月初九',
          ganZhi: {
            year: '甲辰',
            month: '庚寅',
            day: '丙午',
            time: '壬午'
          },
          kongWang: '戌亥',
          shenSha: {
            guiRen: '巳酉丑',
            wenChang: '巳',
            tianXi: '午'
          }
        }
      }
    }
  },
  
  methods: {
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss">
.detail-container {
  min-height: 100vh;
  // background-color: #4B79FF;
}

.content {
  box-sizing: border-box;
  padding: 20rpx;
  
}

.top-card {
  background: linear-gradient(135deg, #4B79FF, #3872FE);
  border-radius: 20rpx;
  padding: 20rpx 30rpx;
  margin-bottom: 20rpx;
  color: #fff;
  box-shadow: 0 4rpx 16rpx rgba(59, 113, 254, 0.2);

  .main-info {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .status-tag {
      padding: 4rpx 20rpx;
      border-radius: 20rpx;
      font-size: 24rpx;
      margin-right: 20rpx;
      
      &.good {
        background-color: rgba(255, 255, 255, 0.2);
      }
      
      &.bad {
        background-color: rgba(244, 67, 54, 0.2);
      }
    }

    .hexagram {
      font-size: 40rpx;
      font-weight: bold;
    }
  }

  .result {
    font-size: 28rpx;
    opacity: 0.9;
  }
}

.detail-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

  .card-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
    position: relative;
    padding-left: 20rpx;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 6rpx;
      height: 24rpx;
      background-color: #3872FE;
      border-radius: 3rpx;
    }
  }

  .info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30rpx;

    .grid-item {
      .label {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 8rpx;
        display: block;
      }

      .value {
        font-size: 30rpx;
        color: #333;
        font-weight: 500;
      }
    }
  }

  .divider {
    height: 1rpx;
    background-color: #f0f0f0;
    margin: 30rpx 0;
  }
}
</style>
